<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <!-- 
      水平导航
      导航 依赖 element 模块，否则无法进行功能性操作
      layui-this 指定哪个导航高亮
      水平导航主题：ayui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
     -->
    <ul class="layui-nav layui-bg-cyan">
      <li class="layui-nav-item">
        <a href="">
          水平导航1
          <span class="layui-badge">9</span>
        </a>
      </li>
      <li class="layui-nav-item layui-this">
        <a href="">
          <img class="layui-nav-img" src="https://t.cn/RCzsdCq" />
          二级菜单
        </a>
        <ul class="layui-nav-child">
          <li><a href="">二级菜单1</a></li>
          <li><a href="">二级菜单2</a></li>
          <li><a href="">二级菜单3</a></li>
        </ul>
      </li>
      <li class="layui-nav-item">
        <a href="">
          水平导航3
          <span class="layui-badge-dot"></span>
        </a>
      </li>
      <li class="layui-nav-item"><a href="">水平导航4</a></li>
      <li class="layui-nav-item"><a href="">水平导航5</a></li>
    </ul>

    <!-- 
      垂直 layui-nav-tree
      侧边导航 layui-nav-tree layui-nav-side
     -->
    <ul class="layui-nav layui-nav-tree">
      <li class="layui-nav-item layui-nav-itemed">
        <a href="">默认展开</a>
        <ul class="layui-nav-child">
          <li><a href="">选项1</a></li>
          <li><a href="">选项2</a></li>
        </ul>
      </li>
      <li class="layui-nav-item">
        <a href="">菜单2</a>
        <ul class="layui-nav-child">
          <li><a href="">选项1</a></li>
          <li><a href="">选项2</a></li>
        </ul>
      </li>
    </ul>

    <script src="./assets/layui/layui.js">
      layui.use(["element"],function(){
        var element = layui.element
      })
    </script>
    <script></script>
  </body>
</html>
